/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState } from "react";
import { connect } from "dva";
import { Typography, Row, Col, Button, Checkbox } from "antd";
import styles from "./MenuSetting.less";

const { Title, Text } = Typography;

const SettingPublish = ({ dispatch }) => {
  const [checked, setChecked] = useState(true);

  const onPublish = () => {
    dispatch({
      type: "wxSettings/publishMenu",
    }).then(res => {
      // 发布成功后，更新菜单列表
      if (res == 0) {
        dispatch({
          type: "wxSettings/save",
          payload: {
            updatingMenu: true,
          },
        });
      }
    });
  };
  return (
    <Row className={styles.formWrapper__release} style={{ marginLeft: 20 }}>
      <Col>
        <Typography>
          <Title>点击左侧公众号菜单栏，按序号设置对应菜单链接</Title>
          <Title level={3}>
            <Text type="warning">
              注1：请不要设置淘宝客相关链接及微信公众号不允许的链接，违规设置会有封号风险
            </Text>
          </Title>
          <Title level={3}>
            <Text type="warning">
              注2：1列菜单只设置一个子菜单跳转链接，则用户点击底部菜单会直接跳转
            </Text>
          </Title>
        </Typography>
      </Col>
      <Col style={{ textAlign: "center", marginTop: 30 }}>
        <Row>
          <Col>
            <Button onClick={onPublish} disabled={!checked} type="primary" size="large">
              发布
            </Button>
          </Col>
        </Row>
        <Row>
          <Col>
            <Checkbox onChange={e => setChecked(e.target.checked)} checked={checked}>
              我已阅读并同意
            </Checkbox>
            <a
              href="https://m.kuaidihelp.com/cloudPrint/order/order/wkdsPro"
              target="_blank"
              rel="noreferrer"
            >
              《免责声明》
            </a>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

export default connect()(SettingPublish);
